<template>
  <FormProvider :form="form">
    <SchemaField :schema="schema" />
    <Submit @submit="log">提交</Submit>
  </FormProvider>
</template>

<script lang="ts">
import { createForm, onFieldChange, onFieldReact } from '@formily/core'
import { FormProvider, createSchemaField } from '@formily/vue'
import {
  Submit,
  FormItem,
  Input,
  ArrayTable,
  Switch,
  VXETablePropsSymbol,
  useTableInstance,
  Space,
  // Editable,
} from '@formily/vxe-table/src'

import { defineComponent, ref, provide, onMounted, watch, Teleport } from 'vue'

const fields = createSchemaField({
  components: {
    FormItem,
    ArrayTable,
    Input,
    Switch,
    Space,
    Teleport,
    // Editable,
  },
})

const schema = {
  type: 'object',
  properties: {
    table: {
      type: 'array',
      'x-decorator': 'FormItem',
      'x-component': 'ArrayTable',
      'x-component-props': {
        align: 'center',
        columnConfig: {
          isCurrent: true,
          isHover: true,
          resizeable: true,
        },
        rowConfig: {
          isCurrent: true,
          isHover: true,
          resizeable: true,
        },
        pagerConfig: {
          autoHidden: true,
          enable: true,
        },
      },
      items: {
        type: 'object',
        properties: {
          colIndex: {
            title: '序号',
            type: 'void',
            'x-component': 'ArrayTable.Column',
            'x-component-props': {
              type: 'seq',
              width: 80,
              align: 'center',
              resizable: true,
            },
          },
          colradio: {
            title: '单选',
            type: 'void',
            'x-display': 'none',
            'x-component': 'ArrayTable.Column',
            'x-component-props': {
              type: 'radio',
              width: 80,
              align: 'center',
              resizable: true,
            },
          },
          colCheckbox: {
            type: 'void',
            'x-component': 'ArrayTable.Column',
            'x-component-props': {
              type: 'checkbox',
              width: 80,
              align: 'center',
              resizable: true,
            },
          },
          colgroupBasic: {
            type: 'void',
            title: '基础信息',
            'x-component': 'ArrayTable.Colgroup',
            'x-component-props': {},
            properties: {
              colgroupBasicGroup: {
                type: 'void',
                title: '基础信息分组',
                'x-component': 'ArrayTable.Colgroup',
                properties: {
                  xxxxx1: {
                    title: '名称',
                    type: 'void',
                    'x-component': 'ArrayTable.Column',
                    'x-component-props': {
                      sortable: true,
                      width: 200,
                      resizable: true,
                    },
                    properties: {
                      name: {
                        type: 'string',
                        'x-component': 'Input',
                      },
                    },
                  },
                },
              },
              xxxxx2: {
                title: '外号',
                type: 'void',
                'x-component': 'ArrayTable.Column',
                'x-component-props': { width: 200, resizable: true },
                properties: {
                  nickname: {
                    type: 'string',
                    'x-component': 'Input',
                  },
                },
              },
            },
          },
          colRole: {
            title: '角色',
            type: 'void',
            'x-component': 'ArrayTable.Column',
            'x-component-props': {
              resizable: true,
            },
            properties: {
              role: {
                type: 'string',
                'x-component': 'Input',
              },
            },
          },
          colAge: {
            title: '年龄',
            type: 'void',
            'x-component': 'ArrayTable.Column',
            'x-component-props': {
              resizable: true,
            },
            properties: {
              age: {
                type: 'string',
                'x-component': 'Input',
              },
            },
          },
        },
      },
      properties: {
        toolbar: {
          type: 'void',
          'x-component': 'ArrayTable.Toolbar',
          properties: {
            space: {
              type: 'void',
              'x-component': 'Space',
              properties: {
                button1: {
                  type: 'void',
                  'x-component': 'button',
                  'x-content': 'BUTTON1',
                },
                button2: {
                  type: 'void',
                  'x-component': 'button',
                  'x-content': 'BUTTON2',
                },
                button3: {
                  type: 'void',
                  'x-component': 'button',
                  'x-content': 'BUTTON3',
                },
                button4: {
                  type: 'void',
                  'x-component': 'button',
                  'x-content': 'BUTTON4',
                },
              },
            },
          },
        },
        top: {
          type: 'void',
          'x-component': 'ArrayTable.Top',
          properties: {
            space: {
              type: 'void',
              'x-component': 'Space',
              properties: {
                button1: {
                  type: 'void',
                  'x-component': 'button',
                  'x-content': 'BUTTON1',
                },
                button2: {
                  type: 'void',
                  'x-component': 'button',
                  'x-content': 'BUTTON2',
                },
                button3: {
                  type: 'void',
                  'x-component': 'button',
                  'x-content': 'BUTTON3',
                },
                button4: {
                  type: 'void',
                  'x-component': 'button',
                  'x-content': 'BUTTON4',
                },
              },
            },
          },
        },
        Form: {
          type: 'void',
          'x-component': 'ArrayTable.Form',
          properties: {
            space: {
              type: 'void',
              'x-component': 'Space',
              properties: {
                Input1: {
                  type: 'void',
                  'x-component': 'Input',
                  'x-decorator': 'FormItem',
                  'x-decorator-props': {
                    label: '输入1',
                  },
                },
                Input2: {
                  type: 'void',
                  'x-component': 'Input',
                  'x-decorator': 'FormItem',
                  'x-decorator-props': {
                    label: '输入2',
                  },
                },
                Input3: {
                  type: 'void',
                  'x-component': 'Input',
                  'x-decorator': 'FormItem',
                  'x-decorator-props': {
                    label: '输入3',
                  },
                },
                Input4: {
                  type: 'void',
                  'x-component': 'Input',
                  'x-decorator': 'FormItem',
                  'x-decorator-props': {
                    label: '输入4',
                  },
                },
              },
            },
          },
        },
        empty: {
          type: 'void',
          'x-component': 'ArrayTable.Empty',
          properties: {
            space: {
              type: 'void',
              'x-component': 'Space',
              properties: {
                button1: {
                  type: 'void',
                  'x-component': 'button',
                  'x-content': 'BUTTON1',
                },
                button2: {
                  type: 'void',
                  'x-component': 'button',
                  'x-content': 'BUTTON2',
                },
                button3: {
                  type: 'void',
                  'x-component': 'button',
                  'x-content': 'BUTTON3',
                },
                button4: {
                  type: 'void',
                  'x-component': 'button',
                  'x-content': 'BUTTON4',
                },
              },
            },
          },
        },
      },
    },
  },
}

const initialValues = {
  table: [
    {
      id: 10001,
      name: 'Test1',
      nickname: 'T1',
      role: 'Develop',
      sex: 'Man',
      age: 28,
      address: 'Shenzhen',
    },
    {
      id: 10002,
      name: 'Test2',
      nickname: 'T2',
      role: 'Test',
      sex: 'Women',
      age: 22,
      address: 'Guangzhou',
    },
    {
      id: 10003,
      name: 'Test3',
      nickname: 'T3',
      role: 'PM',
      sex: 'Man',
      age: 32,
      address: 'Shanghai',
    },
    {
      id: 10004,
      name: 'Test4',
      nickname: 'T4',
      role: 'Designer',
      sex: 'Women',
      age: 23,
      address: 'Shenzhen',
    },
    {
      id: 10005,
      name: 'Test5',
      nickname: 'T5',
      role: 'Develop',
      sex: 'Women',
      age: 30,
      address: 'Shanghai',
    },
    {
      id: 10006,
      name: 'Test6',
      nickname: 'T6',
      role: 'Designer',
      sex: 'Women',
      age: 21,
      address: 'Shenzhen',
    },
    {
      id: 10007,
      name: 'Test7',
      nickname: 'T7',
      role: 'Test',
      sex: 'Man',
      age: 29,
      address: 'Shenzhen',
    },
    {
      id: 10008,
      name: 'Test8',
      nickname: 'T8',
      role: 'Develop',
      sex: 'Man',
      age: 35,
      address: 'Shenzhen',
    },
  ],
}

export default defineComponent({
  components: { FormProvider, Submit, ...fields },
  setup() {
    const form = createForm({
      readPretty: true,
      initialValues: initialValues,
    })

    const instance = useTableInstance() // table的实例可以调用

    provide(
      VXETablePropsSymbol,
      ref({
        onCellClick: console.log,
        onCurrentChange: () => {
          console.log('on current change')
        },
        onToolbarButtonClick: console.log,
        onToolbarToolClick: console.log,
      })
    )

    onMounted(() => {
      console.log(instance.value.getTableData())
    })

    return {
      form,
      schema,
      log: console.log,
    }
  },
})
</script>

<style lang="scss">
table {
  margin: 0;
}
</style>